$(function(){
  //get elem
  let $url = $('input[type="text"]'),
      $btnSave = $('input[type="button"]'),
      $img = $('img'),
      $tmpimg = $('<img>');

  function loadImage(){
    let strImg = window.localStorage.getItem('img');
    if(strImg){
      $img.attr('src',strImg);
      $img.css({display:'block'});
    }else{
      strImg = '';
      $img.css({display:'none'});
    }
  }

  //load local storage image
  loadImage();

  $btnSave.click(()=>{
    //load tmp image
    $tmpimg.attr('crossOrigin','anonymous');

    //validate url: not empty,pattern
    $tmpimg.attr('src',$url.val());
  })
  
  $tmpimg.load(function(){
    let can = $('<canvas>').get(0);
    let ctx = can.getContext('2d');
    ctx.width = this.width;
    ctx.height = this.height;
    
    //fill tmp image canvas
    ctx.drawImage(this,0,0, can.width,can.height);

    //canvas output base64
    //save base64 local storage
    window.localStorage.setItem('img',can.toDataURL());
    loadImage();
  })
})


